import React, { Fragment, useEffect, useState } from 'react';
import './index.less';
import axios from 'axios';
import { Space, Table, Tag, Button, Pagination, Input } from 'antd';
import { useHistory } from 'umi';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { ConfigProvider } from 'antd';

export default function Index() {
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '员工姓名',
      dataIndex: 'realName',
      key: 'realName',
    },
    {
      title: '生效日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '生效日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '是否锁定',
      dataIndex: 'locking',
      key: 'locking',
      render: (_, record) => {
        return record.locking == false ? '否' : '是';
      },
    },
    {
      title: '限制重复登录',
      dataIndex: 'login',
      key: 'login',
      render: (_, record) => {
        return record.locking == false ? '否' : '是';
      },
    },
    {
      title: '直接上级',
      dataIndex: 'superior',
      key: 'superior',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
    },
  ];
  const history = useHistory();

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [data, setdata] = useState([]);
  const [total, settotal] = useState(0);
  const [page, setpage] = useState(1);
  const [pagesize, setpagesize] = useState(3);
  useEffect(() => {
    getUser(page, pagesize);
  }, []);
  const getUser = async (page, pagesize) => {
    let { data } = await axios.get(
      `http://127.0.0.1:7777/users/userlist/?page=${page}&pagesize=${pagesize}`,
    );
    setdata(data.userlist);
    settotal(data.total);
  };

  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const onChange = (page, pageSize) => {
    setpage(page);
    setpagesize(pageSize);
    getUser(page, pageSize);
  };
  return (
    <Fragment>
      <div className="user_contain">
        <div className="usermenu">
          <Button
            className="user_btn"
            onClick={() => {
              history.push('/home/system/adduser');
            }}
          >
            新建
          </Button>
          <Button className="user_btn">修改</Button>
          <Button className="user_btn">删除</Button>
          <Button className="user_btn">登录信息</Button>
          <Button className="user_btn">导入</Button>
          <Button className="user_btn">导出</Button>
        </div>
        <div className="inputs">
          <label>用户名：</label>
          <input type="text" className="inps" name="" id="" />
          <label>员工姓名：</label>
          <input type="text" className="inps" name="" id="" />
          <label>锁定标志：</label>
          <select className="inps">
            <option value={true}>是</option>
            <option value={false}>否</option>
          </select>
          <label>生效日期：</label>
          <input type="date" className="inps" />
          <input type="date" className="inps" />
        </div>
        <div className="input2s">
          <label>主部门：</label>
          <input type="text" className="inps" name="" id="" />
          <label>主岗位：</label>
          <input type="text" className="inps" name="" id="" />
          <label>直接上级：</label>
          <input type="text" className="inps" name="" id="" />
          <input type="submit" name="" id="" className="submit" value="查询" />
        </div>

        <Table
          columns={columns}
          rowKey={(record) => record._id}
          pagination={false}
          dataSource={data}
          rowSelection={rowSelection}
          scroll={{ x: '1400px', y: '380px' }}
        />
        <ConfigProvider locale={zh_CN}>
          <Pagination
            total={total}
            showTotal={(total) => `共有条 ${total} 数据`}
            defaultPageSize={pagesize}
            current={page}
            onChange={onChange}
            showSizeChanger
            pageSizeOptions={[1, 3, 5, 7]}
          />
        </ConfigProvider>
      </div>
    </Fragment>
  );
}
